<template>
	<view :style="skin" class="content contract">
		<view class="uploadMain">
			<view class="topLine" />
			<view class="tilte">
				{{$t('login.PhotoUpload')}}
			</view>
			<view class="titleTips">
				<!-- {{$t('login.photoCheck')}} -->
			</view>
			<view class="uploadBox">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="4" multiple :maxCount="1"
					width="300" height="300">
				</u-upload>
				<!-- <view class="iconBox" v-if="URL1 == ''" @click="handle">
					<u-icon class="cameraIcon" name="camera" color="#D3D4D6"  size="28"></u-icon>
				</view>
				<u--image v-else width="300px" height="300px"  :src="URL1" shape="square"></u--image> -->

				<view class="uploadTips">
					{{$t('login.ClickUpload')}}<text>{{$t('login.ProfilePhoto')}}</text>
				</view>
			</view>



		</view>

		<view class="btnModule">
			<u-button color="var(--subjectColor)" @click="handleNext">{{$t('login.nextPage')}}
			</u-button>
			<fui-safe-area></fui-safe-area>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		iconUpload
	} from '@/api/user.js'
	import {
		cloudmateURL
	} from '@/utils/requestURL.js'
	import {
		cameraAuthority
	} from '@/utils/jurisdiction.js'
	export default {
		data() {
			return {
				fileList: [],
				URL1: '',
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		onShow() {
			let that = this
			uni.setNavigationBarTitle({
				title: that.$t('login.Verification'),
			});
			
			let userObj = uni.getStorageSync('userObj');
			if(userObj.avatar){
				this.URL1 = userObj.avatar
				this.fileList = [{
					url:userObj.avatar
				}]
			}
			
			console.log(userObj);
		},
		onLoad() {
			let that = this
			console.log(that.$t('login.Verification'));
			cameraAuthority();
			uni.setNavigationBarTitle({
				title: that.$t('login.Verification'),
			});
		},
		methods: {

			handle() {
				cameraAuthority().then(res => {
					console.log(res);
					let that = this
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: async function(files) {
							let res = await iconUpload(files.tempFilePaths[0])

							let rrs = JSON.parse(res)
							if (rrs.code == 0) {
								console.log(cloudmateURL + rrs.data.url);
								that.URL1 = cloudmateURL + rrs.data.url
								console.log(that.URL1);

							}


						},
					})
				})
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {


				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: 'uploading'
					})
				})

				const result = await this.uploadFilePromise(lists[0].url)
				console.log(result);
				let item = this.fileList[fileListLen]
				this.fileList.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))

			},
			async uploadFilePromise(url) {
				let res = await iconUpload(url)

				let rrs = JSON.parse(res)
				console.log(rrs);
				if (rrs.code == 0) {
					console.log(cloudmateURL + rrs.data.url);
					this.URL1 = cloudmateURL + rrs.data.url
					console.log(this.URL1);
					return cloudmateURL + rrs.data.url
				} else {
					uni.showToast({
						title: rrs.msg,
						icon: 'none'
					})

				}
			},

			handleNext() {
				let that = this
				if (this.URL1 == '') {
					uni.showToast({
						title: that.$t('login.photoEmpty'),
						icon: 'none'
					})
					return false
				}

				let userObj = uni.getStorageSync('userObj')
				userObj.avatar = this.URL1
				console.log(userObj);
				uni.setStorageSync('userObj', userObj)

				uni.navigateTo({
					url: '/pages/login/contract/contract'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contract {

		.uploadMain {
			width: 100%;
			height: calc(100% - 100px);

			.topLine {
				width: 100%;
				height: 8px;
				background-color: #F2F3F5;

			}

			.tilte {
				font-size: 14px;
				margin-bottom: 10px;
				color: #1D2129;
				padding: 0 16px;
				box-sizing: border-box;
			}

			.titleTips {
				font-size: 12px;
				color: #96909C;
				margin-bottom: 20px;
				padding: 0 16px;
				box-sizing: border-box;
			}

		}

		.uploadBox {
			width: 300px;
			margin: 16px auto;
			box-sizing: border-box;

			.iconBox {
				width: 300px;
				height: 300px;
				text-align: center;
				line-height: 300px;
				background-color: #F4F5F7;
				position: relative;

				.cameraIcon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.uploadTips {
				text-align: center;

				text {
					color: var(--subjectColor);
					margin-left: 8px;
				}
			}
		}

		.btnModule {
			width: 100%;
			height: 44px;
			box-sizing: border-box;
			margin-top: 16px;
			padding: 16px;
			box-sizing: border-box;
		}
	}
</style>